<template>
  <div class="program-config">
    <div class="back">
      <el-icon size="30px" v-if="active !== 0" @click="active -= 1">
        <Back />
      </el-icon>
    </div>
    <div class="steps">
      <el-steps :active="active" align-center>
        <el-step title="基本信息" :icon="Edit" />
        <el-step title="人员配置" :icon="User" />
        <el-step title="进度配置" :icon="PieChart" />
      </el-steps>

    </div>
    <keep-alive>
      <BaseInfo @nextStep="step" v-if="active == 0" />
      <StaffInfo @nextStep="step" @lastStep="step" v-else-if="active == 1" />
      <ProgressInfo @lastStep="step" @nextStep="goProgramDetail" v-else />
    </keep-alive>
  </div>
</template>

<script setup name="ProgramConfig">
import { Edit, User, PieChart, Back } from '@element-plus/icons-vue'
import { BaseInfo, ProgressInfo, StaffInfo } from './components'
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
// 当前填写步骤下标 0 1 2
const active = ref(router.currentRoute.value.query.tab || 0)
const step = (step) => {
  active.value = step
}

const goProgramDetail = () => {
  router.push({
    name: 'program-detail',
    query: router.currentRoute.value.query
  })
}
</script>

<style lang="less" scoped src="./program-config.less">

</style>
